<template>
  <div class="org-unit-tree-layout">
    <qc-async-tree
      ref="asyncTreeRef"
      :checkable="checkable"
      :checkStrictly="checkStrictly"
      :load-data="loadData"
      :replace-fields="replaceFields"
      :disabledKeys="disabledKeys"
      :show-action-icon="showActionIcon"
      v-model:checkedKeys="checkedKeys"
      @tree-select-change="handlerTreeSelectChange"
      @tree-checked-change="handlerTreeCheckedChange"
      @add-icon-click="handlerAddIconClick"
      @edit-icon-click="handlerEditIconClick"
      @delete-icon-click="handlerDeleteIconClick"
    ></qc-async-tree>
  </div>
  <a-modal
    v-if="deptFormVisible"
    v-model:visible="deptFormVisible"
    @ok="handleOk"
  >
    <template #title> {{ modalTitle }} </template>
    <dept-form
      ref="deptFormModalRef"
      :dept-id="operationDeptId"
      :parent-dept-id="operationParentDeptId"
    ></dept-form>
  </a-modal>
</template>
<script lang="ts">
import { useI18n } from "vue-i18n";
import { defineComponent, ref, toRefs, reactive, Ref } from "vue";
import { DeptTreeProps } from "../interface";
import DeptForm from "./dept-form.vue";
import deptApi from "/@/api/org/dept";
const replaceFields = {
  title: "deptName",
  key: "deptId",
  parentKey: "parentId",
};
export default defineComponent({
  name: "OrgDeptTree",
  props: DeptTreeProps,
  components: {
    DeptForm,
  },
  emits: ["deptTreeSelectChange", "deptTreeCheckedChange"],
  setup(props, { emit }) {
    const { t } = useI18n();
    const asyncTreeRef = ref(null);
    const deptProps = reactive({ ...props });
    const deptFormModalRef = ref(null);
    const deptFormModalState = reactive({
      deptFormVisible: false, //是否显示部门详情页面
      operationDeptId: null, //修改 删除 操作点击的部门id  新增时为null
      operationParentDeptId: null, //新增操作点击的部门id 修改时为null
      modalTitle: null, //部门详情弹窗标题
      //弹窗确认事件
      handleOk: () => {
        deptFormModalRef.value.onSubmit().then(() => {
          deptFormModalState.deptFormVisible = false;
          //无语这里要判断他是新增成功还是修改成功 新增 刷新当前节点 修改刷新父节点
          if (deptFormModalState.operationDeptId) {
            asyncTreeRef.value.refreshParentNode();
          } else {
            asyncTreeRef.value.refreshCurrentNode();
          }
        });
      },
    });

    const asynceTreeState = {
      replaceFields,
      //加载部门树数据
      loadData: (param: any) => deptApi.list({ ...param }),
      //tree选中事件
      handlerTreeSelectChange: (key: string, node: any) => {
        emit("deptTreeSelectChange", key, node);
      },
      //tree勾选事件
      handlerTreeCheckedChange: (key: string, node: any) => {
        emit("deptTreeCheckedChange", key, node);
      },
      //新增部门
      handlerAddIconClick: (item: any) => {
        deptFormModalState.operationParentDeptId = item.deptId;
        deptFormModalState.operationDeptId = null;
        deptFormModalState.modalTitle = t("org.dept.addFormModalTitle");
        deptFormModalState.deptFormVisible = true;
      },
      //编辑部门
      handlerEditIconClick: (item: any) => {
        deptFormModalState.operationDeptId = item.deptId;
        deptFormModalState.operationParentDeptId = null;
        deptFormModalState.modalTitle = t("org.dept.editFormModalTitle");
        deptFormModalState.deptFormVisible = true;
      },
      //删除部门
      handlerDeleteIconClick: (item: any) => {
        deptFormModalState.operationDeptId = item.deptId;
        deptFormModalState.operationParentDeptId = null;
        deptApi.delete(item).then(() => {
          asyncTreeRef.value.refreshParentNode();
        });
      },
    };
    return {
      asyncTreeRef,
      deptFormModalRef,
      ...toRefs(deptFormModalState),
      ...toRefs(deptProps),
      ...asynceTreeState,
    };
  },
});
</script>
<style lang="less" scoped>
</style>